import ListItem from "./components/ListItem/ListItem";
import Form from "./components/Form/Form";
import "./assets/list.css";
import { useState } from "react";
// console.log("listitem:", ListItem);
const App = () => {
  let [data, setData] = useState([
    {
      id: "01",
      date: new Date(2023, 7, 20),
      title: "学习React",
      desc: "今天学习了130分钟",
    },
    {
      id: "02",
      date: new Date(2022, 4, 5),
      title: "学习Typescript",
      desc: "今天学习了40分钟",
    },
    {
      id: "03",
      date: new Date(2023, 11, 13),
      title: "学习微前端",
      desc: "今天学习了60分钟",
    },
  ]);
  const changeForm = (e) => {
    let newData = { id: new Date().getTime(), ...e };
    setData([...data, newData]);
  };
  // console.log("=========>", data);
  const ListItems = data.map((item) => (
    <ListItem
      key={item.id}
      date={item.date}
      title={item.title}
      desc={item.desc}
    ></ListItem>
  ));
  return (
    <div>
      <Form changeForm={changeForm}></Form>
      <div className="list">
        {/* 传递属性title desc fn。组件中通过参数props接收 */}
        {ListItems}
      </div>
    </div>
  );
};

export default App;
